SOP 2: Design Webpage Layout using HTML and CSS
- top section will display the heading, ‘Tourist places’ in
header. The section on the left has list of cities.
- The right hand side displays tourist places
of any one of the city.
- Use Inline style sheet in the top section to display background color for the
text ‘Tourist places’.
- Use internal stylesheet for the left and right section
with background color and font styles.
Source Code: index.html
<!doctype html>
<html>
<head>
<title>Tourist places</title>
<style>
aside {
background-color: yellow;
border: 2px black solid;
font-size: 25px;
display: inline;
float: left;
width: 49.6%;
height: 250px;
}
section {
background-color: pink;
border: 2px black solid;
text-align: left;
font-size: 25px;
float: right;
width: 49.7%;
height: 250px;
}
</style>
</head>
<body>
<header>
<h1 style="border:2px black solid;
background-color:skyblue;
text-align:center; padding:40px;
font-size:50px; margin-bottom:0px;">Tourist Places</h1>
</header>
<aside>
<h3>City</h3>
<ol>
<li>Pune</li>
<li>Bangalore</li>
<li>Hyderabad</li>
<li>Delhi</li>
</ol>
</aside>
<section>
<h3>Tourist places in Pune</h3>
<ul>
<li>Shaniwar Wada</li>
<li>Kelkar Museum</li>
<li>Sinhgad Fort</li>
</ul>
</section>
</body>
</html>
Live Preview